<template>
  <div :id="id" v-if="headerData.length">
    <c-table
      ref="elTable"
      width="100%"
      :border="border"
      :stripe="stripe"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      v-bind="$attrs"
      v-on="$listeners"
      :data="tableData"
      :height="height"
      :max-height="maxHeight"
      :size="tableSize"
      @sort-change="handleSort"
      @select-all="handleSelectAll"
      @select="handleSelect"
      @selection-change="handleSelectionChange"
    >
      <c-table-column
        v-if="selection"
        type="selection"
        :selectable="selectable"
        :width="headerOptions.width"
        :fixed="headerOptions.fixed"
        align="center"
      ></c-table-column>
      <c-table-column
        v-if="index"
        type="index"
        label="序号"
        align="center"
        :width="headerOptions.indexWidth"
        :fixed="headerOptions.indexFixed"
      >
        <template v-slot="scope">
          <div class="text-center">
            {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
          </div>
        </template>
      </c-table-column>
      <template v-for="column of headerData">
        <c-table-column
          v-if="column.children && column.children.length"
          :header-align="column.headerAlign || 'center'"
          :fixed="column.fixed"
          :min-width="column.minWidth"
          :key="column.prop"
          :label="column.label"
          v-bind="getColumnProps(column.columnProps)"
        >
          <c-table-column
            v-for="child of column.children"
            :header-align="child.headerAlign || 'center'"
            :fixed="child.fixed"
            :min-width="child.minWidth"
            :key="child.prop"
            :align="child.align"
            :width="child.width"
            :label="child.label"
            :prop="child.prop"
            :sortable="child.sortable"
            :formatter="child.formatter"
            :show-overflow-tooltip="child.overflow"
            v-bind="getColumnProps(child.columnProps)"
          >
            <template v-slot="scope">
              <table-content :context="scope" :config="child"></table-content>
            </template>
          </c-table-column>
        </c-table-column>
        <c-table-column
          v-else
          :header-align="column.headerAlign || 'center'"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :key="column.prop"
          :align="column.align"
          :width="column.width"
          :label="column.label"
          :prop="column.prop"
          :sortable="column.sortable"
          :formatter="column.formatter"
          :show-overflow-tooltip="column.overflow"
          v-bind="getColumnProps(column.columnProps)"
        >
          <template v-slot="scope">
            <table-content :context="scope" :config="column"></table-content>
          </template>
        </c-table-column>
      </template>
    </c-table>
  </div>
</template>

<script>
import TableContent from './table-content'

export default {
  name: 'yq-table',
  props: {
    index: {
      default: true,
      type: Boolean
    },
    id: {
      default: 'table-wrap',
      type: String
    },
    showPagination: {
      default: true,
      type: Boolean
    },
    showIndex: {
      default: true,
      type: Boolean
    },
    border: {
      default: true,
      type: Boolean
    },
    stripe: {
      default: true,
      type: Boolean
    },
    tableSize: {
      type: String
    },
    pageOptions: {
      type: Object,
      default: () => {}
    },
    options: {
      type: Object,
      default: () => {}
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    single: Boolean,
    small: Boolean,
    selection: Boolean,
    loading: Boolean,
    tableData: Array,
    total: Number,
    selectable: Function,
    height: [String, Number],
    maxHeight: [String, Number],
    headerData: Array
  },
  computed: {
    headerOptions() {
      const baseOpts = {
        width: '60px',
        fixed: false,
        indexWidth: '60px',
        indexFixed: false
      }
      return Object.assign({}, baseOpts, this.options)
    }
  },
  methods: {
    getColumnProps(val) {
      if (typeof val !== 'object') return null
      return val
    },
    handleSort(column, prop, order) {
      this.$emit('table-sort', column, prop, order)
    },
    handleSelectionChange(val) {
      this.$emit('select-change', val)
    },
    handleSelectAll(val) {
      this.$emit('select-all', val)
    },
    handleSelect(val, row) {
      this.$emit('select', val, row)
    },
    handlePage(val) {
      this.$emit('now-page', val)
    },
    handleSize(val) {
      this.$emit('now-size', val)
    }
  },
  components: {
    TableContent
  }
}
</script>
